import React, { useContext, useEffect, useState } from "react";
import { Form, Tabs } from "@arco-design/web-react";

import { EditorGlobalContext } from "../../consts";
import { EditorPageInfoOpt, PropsOpt } from "../../utils/tools";
import { cloneDeep, isEqual } from "lodash";
import { PropFormType, renderForm } from "../../ui-components/property";

const TabPane = Tabs.TabPane;

export default function PropertyIndex() {
	const { gEditorConfig, editorPageInfo, setEditorPageInfo, selectedItems } = useContext(EditorGlobalContext);
	const [formInfo, setFormInfo] = useState({});
	const [propertyForm] = Form.useForm();
	const [dataSourceForm] = Form.useForm();

	useEffect(() => {
		// console.log(66666666666);
		const len = selectedItems.length;
		const { config } = gEditorConfig;
		switch (len) {
			case 0: // 未选中
				break;
			case 1: // 选中一个
				{
					const { uuid, type } = selectedItems[0];
					const itemConfig = config[type]; // 配置
					const editorPageInfoMap = EditorPageInfoOpt.toMap(editorPageInfo);

					const itemInfo = editorPageInfoMap[uuid]; // 数据

					if (!itemConfig) return;

					const defaultProps = itemConfig.property?.default;
					const customProps = itemConfig.property?.custom;

					const propsObj = PropsOpt.get(defaultProps, customProps);

					const dataIsEqual = isEqual(formInfo, {
						config: propsObj,
						data: itemInfo
					});

					if (dataIsEqual) return;

					setFormInfo({
						config: propsObj,
						data: itemInfo
					});
				}

				break;
			default: // 群组选中
				break;
		}
	}, [selectedItems, gEditorConfig, propertyForm, dataSourceForm]); // , gEditorConfig, editorPageInfoMap, propertyForm, dataSourceForm, formInfo

	useEffect(() => {
		// console.log(7777);
		if (JSON.stringify(formInfo) === "{}") return;

		const { data } = formInfo;
		const editorPageInfoMap = EditorPageInfoOpt.toMap(editorPageInfo);
		const itemData = editorPageInfoMap[data.uuid];

		if (!itemData) return;

		propertyForm.setFieldsValue(itemData.props);
		dataSourceForm.setFieldsValue(itemData.props.dataSource);
	}, [formInfo, propertyForm, dataSourceForm, editorPageInfo]); // propertyForm, dataSourceForm, formInfo, editorPageInfoMap

	const formFunc = {
		propertyForm: formData => {
			return (
				<Form
					form={propertyForm}
					colon={false}
					labelCol={{
						span: 8
					}}
					wrapperCol={{
						span: 14
					}}
					onValuesChange={(changedValues, allValues) => formFunc.propertyFormValueChange(changedValues, allValues)}
					layout="horizontal"
					className="form-prop-wrapper">
					{renderForm(formData, PropFormType.Base)}
				</Form>
			);
		},
		dataSourceForm: formData => {
			return (
				<Form.Provider
					form={dataSourceForm}
					colon={false}
					onFormValuesChange={(changedValues, allValues) => formFunc.dataSourceFormValueChange(changedValues, allValues)}
					labelCol={{ style: { width: 90 } }}
					layout="horizontal"
					className="form-data-wrapper">
					{renderForm(formData, PropFormType.Data)}
				</Form.Provider>
			);
		},
		eventForm: () => {
			return (
				<Form
					// form={eventForm}
					colon={false}
					labelCol={{
						span: 6
					}}
					wrapperCol={{
						span: 14
					}}
					onValuesChange={(changedValues, allValues) => formFunc.eventFormValueChange(changedValues, allValues)}
					layout="horizontal">
					{/* {renderForm(formInfo, PropFormType.Event)} */}
				</Form>
			);
		},
		changedValues: (formData, changedValues) => {
			// 只有表单中某一个值改变就修改全局数据
			if (JSON.stringify(formData) === "{}") return;

			const data = formData.data;

			const dataProps = cloneDeep(data.props);
			const cValues = cloneDeep(changedValues);

			Object.assign(dataProps, changedValues);

			// 校验： 如果值没有改变就不更改
			if (isEqual(dataProps, data.props)) return;

			// 修改formInfo的值
			const formInfoClone = cloneDeep(formData);

			if (formInfoClone?.data?.props) {
				formInfoClone.data.props = dataProps;
				setFormInfo(formInfoClone);
			}

			const editorPageInfoData = EditorPageInfoOpt.updateEditorPageItem(editorPageInfo, {
				uuid: data.uuid,
				props: cValues
			});

			// console.log(editorPageInfoData);

			setEditorPageInfo(editorPageInfoData);
		},
		propertyFormValueChange: (changedValues, allValues) => {
			// console.log(changedValues, formInfo, allValues);
			formFunc.changedValues(formInfo, changedValues);
		},
		dataSourceFormValueChange: changedValues => {
			const formInfoClone = cloneDeep(formInfo);
			const dataSourceProp = formInfoClone?.data?.props?.dataSource;
			const dataSourceValue = {
				dataSource: dataSourceProp
			};
			// 将表单数据赋值给全局数据保存
			const changedValueKeys = Object.keys(changedValues);
			changedValueKeys &&
				changedValueKeys.map(key => {
					dataSourceProp[key] = changedValues[key];
				});
			// console.log(formInfo, dataSourceValue);
			formFunc.changedValues(formInfo, dataSourceValue);
		},
		eventFormValueChange: changedValues => {
			formFunc.changedValues(formInfo, changedValues);
		}
	};

	return (
		<>
			<div className="property-tabs">
				<Tabs>
					<TabPane key="1" title="属性">
						{formFunc.propertyForm(formInfo)}
					</TabPane>
					<TabPane key="2" title="数据">
						{formFunc.dataSourceForm(formInfo)}
					</TabPane>
					<TabPane key="3" title="事件"></TabPane>
				</Tabs>
			</div>
			<style global jsx>
				{`
					.property-tabs {
						height: 100%;
					}

					.property-tabs .arco-tabs {
						height: 100%;
					}

					.property-tabs .arco-tabs-content {
						height: calc(100% - 39px);
						overflow-y: scroll;
					}

					.property-tabs .arco-tabs-content {
						height: calc(100% - 39px);
						overflow-y: auto;
						scrollbar-width: thin;
						scrollbar-color: #999999 #f0f0f0;
					}

					.property-tabs .arco-tabs-content::-webkit-scrollbar {
						width: 8px; /* 设置滚动条宽度 */
					}

					.property-tabs .arco-tabs-content::-webkit-scrollbar-thumb {
						background-color: #999999; /* 设置滚动条滑块颜色 */
					}

					.property-tabs .arco-tabs-content::-webkit-scrollbar-track {
						background-color: #f0f0f0; /* 设置滚动条轨道颜色 */
					}

					.property-tabs .arco-tabs-header {
						width: 100%;
					}

					.property-tabs .arco-tabs-content .arco-tabs-pane {
						color: #4e5969;
					}

					.property-tabs .arco-tabs-content .arco-tabs-pane .form-item-base .form-item-base-content {
						display: grid;
						grid-template-columns: 1fr 1fr;
					}

					.property-tabs .arco-tabs-content .arco-tabs-pane .arco-form-item {
						margin-bottom: 10px;
					}

					.property-tabs .arco-tabs-content .arco-tabs-pane .arco-form-item > label {
						font-size: 12px;
					}

					.property-tabs .arco-tabs-content .arco-tabs-pane .cu-border {
						background: #00000014;
					}

					.property-tabs .arco-tabs-content .arco-tabs-pane .ant-form-item-no-colon {
						line-height: 20px;
						padding-left: 16px;
						font-size: 12px;
						font-weight: 700;
						text-align: left;
						color: #000;
					}

					.property-tabs .arco-tabs-content .arco-tabs-pane .ant-form-item-no-colon .arco-form-label-item {
						height: 28px;
					}
				`}
			</style>
		</>
	);
}
